<template>
	<div>
		<el-row>
			<el-select v-model="selectedCompany" placeholder="选择公司">
				<el-option v-for="company in companyList" :key="company.id" :label="company.name" :value="company.id"></el-option>
			</el-select>
		</el-row>
		<el-row style="margin-top: 20px;">
			<el-table :data="tableData[selectedCompany]" border style="width: 100%">
				<el-table-column label="ID" width="70">
					<template slot-scope="scope">
						<span style="margin-left: 10px">{{ scope.row.id }}</span>
					</template>
				</el-table-column>

				<el-table-column label="短信描述">
					<template slot-scope="scope">
						{{ scope.row.description }}
					</template>
				</el-table-column>

				<!--<el-table-column label="操作" width="120">-->
					<!--<template scope="scope" >-->
						<!--<el-button size="small" @click="editClient(scope.$index, scope.row)">-->
							<!--<template>-->
								<!--<icon name="pencil"></icon>-->
							<!--</template>-->
						<!--</el-button>-->
						<!--<el-button size="small" type="danger" @click="deleteClient(scope.$index, scope.row)">-->
							<!--<template>-->
								<!--<icon name="trash"></icon>-->
							<!--</template>-->
						<!--</el-button>-->
					<!--</template>-->
				<!--</el-table-column>-->
			</el-table>

			<div style="margin-top: 20px">
				<el-button style="float: right" @click="addClient">
					<icon name="plus"></icon>
				</el-button>
			</div>
		</el-row>

		<el-dialog :title="smsTemplate.title" :visible.sync="dialogVisible" size="tiny">
			<el-form ref="form" label-width="120px">
				<el-form-item label="客户端名称">
					<el-input v-model="smsTemplate.name"></el-input>
				</el-form-item>


				<el-form-item label="公开">
					<el-switch on-text="" off-text="" v-model="smsTemplate.public"></el-switch>
				</el-form-item>

				<el-form-item label="客户端信息">
					<el-input type="textarea" v-model="smsTemplate.clientData"></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
    			<el-button @click="dialogVisible = false">Cancel</el-button>
    			<el-button type="primary" @click="dialogVisible = false">Confirm</el-button>
  			</span>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		name: 'sms-template',
		data() {
			return {
				companyList: [
					{name: '苁蓉妈妈', id: 1},
					{name: '复生堂杭州', id: 2},
					{name: '苁蓉中医', id: 3},
				],
				selectedCompany: undefined,
				tableData: {
					1: [{id: 1,description: '注册用户验证码短信'}],
					2: [{id: 2,description: '提醒诊断结算短信'}],
					3: []
				},
				dialogVisible:false,
				smsTemplate:{}
			}
		},
		methods: {
			addClient(){
				this.smsTemplate = {
					title: '添加客户端',
					id: this.tableData[length],
					date: new Date('yyyy','mm','dd'),
					public: false,
					clientData:'',
					name: '',
				};
				this.dialogVisible = true;
			},
			editClient(index, row) {
				this.dialogVisible = true;
				this.smsTemplate = {
					title: '编辑客户端',
					id: row.id,
					date: row.date,
					clientData: row.clientData,
					name: row.name,
				}
				if(row.public == 0) this.smsTemplate.public = false;
				else this.smsTemplate.public = true;
			},
			deleteClient(index, row) {
				console.log(index, row);
				this.$confirm('确定删除数据？', '提醒', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.$message({
						type: 'success',
						message: '操作成功'
					});
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '操作失败'
					});
				});
			}
		}
	}
</script>
